<template>
  <div class="home">
    <div class="search">
      <input type="text"
             v-model="txt">
    </div>
    <div class="list">
      <div class="list_one"
           v-for="item in list"
           :key="item">
        <a :href="item.url">
          <img :src="item.image"
               alt="">
          <span>{{item.title}}</span>
        </a>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Home',
  data () {
    return {
      txt: "",
      articles: [
        {
          "title": "What You Need To Know About CSS Variables",
          "url": "https://www.runoob.com/css/css-tutorial.html",
          "image": "https://static.runoob.com/images/icon/css.png"
        },
        {
          "title": "Freebie: 4 Great Looking Pricing Tables",
          "url": "https://www.runoob.com/html/html-tutorial.html",
          "image": "https://static.runoob.com/images/icon/html.png"
        },
        {
          "title": "20 Interesting JavaScript and CSS Libraries for February 2016",
          "url": "https://www.runoob.com/css3/css3-tutorial.html",
          "image": "https://static.runoob.com/images/icon/css3.png"
        },
        {
          "title": "Quick Tip: The Easiest Way To Make Responsive Headers",
          "url": "https://www.runoob.com/css3/css3-tutorial.html",
          "image": "https://static.runoob.com/images/icon/css3.png"
        },
        {
          "title": "Learn SQL In 20 Minutes",
          "url": "https://www.runoob.com/sql/sql-tutorial.html",
          "image": "https://static.runoob.com/images/icon/sql.png"
        },
        {
          "title": "Creating Your First Desktop App With HTML, JS and Electron",
          "url": "https://www.runoob.com/js/js-tutorial.html",
          "image": "https://static.runoob.com/images/icon/html.png"
        }
      ]
    }
  },
  computed: {
    list () {
      return this.articles.filter((ele, index) => {
        return ele.title.toLowerCase().includes(this.txt.toLowerCase())
      })
    }
  }
}
</script>
<style scoped lang="less">
.search {
  width: 600px;
  background: #ccc;
  line-height: 50px;
  height: 50px;
  margin: 0 auto;
  input {
    width: 500px;
    height: 40px;
    line-height: 40px;
    height: 40px;
  }
}
.list {
  width: 600px;
  margin: 20px auto;
  .list_one {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    height: 100px;
    display: flex;

    img {
      width: 70px;
      height: 70px;
      margin-top: 15px;
    }
  }
}
</style>
